<template>
	<view class="container">
		<!-- 头部区域 -->
		<view class="header">
			<image src="/static/images/recommendSong/recommendSong.jpg"></image>
			<view class="date">
				<text class="day">{{day}}月</text>/
				<text class="month">{{month}}日</text>
			</view>
		</view>
		
		<!-- 列表区域 -->
		<view class="list">
			<!-- 头部 -->
			<view class="listHeader">
				<text>播放全部</text>
				<text class="right">多选</text>
			</view>
			<!-- 内容滚动区 -->
			<scroll-view scroll-y class="listScroll" v-if="recommendList.length">
				<view @click="toSongDetail" :data-index="index" :data-song="item" class="scrollItem" v-for="(item,index) in recommendList" :key="item.id">
					<image :src="item.al.picUrl"></image>
					<view class="musicInfo">
						<text class="musicName">{{item.name}}</text>
						<text class="author">{{item.ar[0].name}}</text>
					</view>
					<text class="iconfont icon-gengduo"></text>
				</view>
			</scroll-view>
			<loadTip v-else></loadTip>
		</view>
	</view>
</template>

<script>
	import loadTip from '../../components/loadTip/loadTip.vue'
	export default {
		data() {
			return {
				day: '',
				month: '',
				// 推荐歌曲数据
				recommendList: [],
				index: 0, // 点击音乐的下标
			}
		},
		components:{loadTip},
		onLoad() {
			// 加载就获取当天日期
			this.day = new Date().getDate()
			this.month = new Date().getMonth() + 1
			
			this.getRecommendSong()
			
			
			// 订阅方,来自songDetail传过来的参数type
			uni.$on('switchType',(type) => {
				console.log(type,'我要切歌了');
				if(type === 'pre'){ // 切换上一首
				// if(this.index === 0){this.index = this.recommendList.length}
				// 等同于上面,如果是第一首歌切换上一首 就是播放最后一首 length-1 就是数组最后一个
					(this.index === 0) && (this.index = this.recommendList.length)
					this.index -= 1
				}else {// 切换下一首
					if(this.index === this.recommendList.length - 1) {this.index = -1}
					// (this.index === this.recommendList.length - 1) && (this.index = -1)
					this.index += 1
				}
				let musicId = this.recommendList[this.index].id
				// 将musicId 回传给songDetail页面
				uni.$emit('musicId',musicId)
				console.log(musicId,'recommendSong');
			})
		},
		methods: {
			// 获取用户每日推荐歌曲
			async getRecommendSong() {
				// 先判断用户是否登录
				let uInfo = uni.getStorageSync('userInfo')
				if(!uInfo) {
					uni.showToast({
						title:'请先登录',
						icon:'error',
						success() {
							setTimeout(() => {
								uni.reLaunch({
									url:'/pages/login/login'
								})
							},2000)
						}
					})
					return
				}
				let res = await this.$myRequest('/recommend/songs')
				this.recommendList = res.data.dailySongs
			},
			// 跳转对应内容的songDetail页面
			toSongDetail(event) {
				// let song = event.currentTarget.dataset.song
				// let index = event.currentTarget.dataset.index
				let {song,index} = event.currentTarget.dataset  //ES6结构写法
				this.index = index // 存储到data里 全局
				// 路由传参
				uni.navigateTo({
					// 不能直接将song对象作为参数传递，长度过长，会被自动截取掉    
					// url:'/pages/songDetail/songDetail?song=' + JSON.stringify(song)
					url:'/pages/songDetail/songDetail?songId=' + song.id
				})
				console.log(song.id);
				console.log('当前歌曲下标',index);
			}
		}
	}
</script>

<style lang="scss">
	.container {
		// 头部样式
		.header {
			position: relative;
			
			width: 100%;
			height: 300rpx;
			image {
				width: 100%;
				height: 100%;
			}
			.date {
				// 子绝父相  第二种在 songDetail.vue
				// 第一种方法：如何把子元素设置到父元素的中间
				position: absolute;
				left: 50%;
				top: 50%;
				// 减去宽高的一般
				margin-left: -130rpx;
				margin-top: -40rpx;
				
				width: 300rpx;
				height: 100rpx;
				// border: 1rpx solid red;
				line-height: 100rpx;
				text-align: center;
				color: $cloundMusic-color;
				
				.day {
					font-size: 48rpx;
					padding-right: 10rpx;
				}
				.month {
					font-size: 30rpx;
					padding-left: 10rpx;
				}
			}
		}
	
		// 列表样式
		.list {
			position: relative;
			top: -20rpx;
			padding: 0 20rpx;
			border-radius: 30rpx;
			background: #fff;
			.listHeader {
				height: 80rpx;
				line-height: 80rpx;
				.right{
					float: right;
				}
			}
			
			.listScroll {
				/* #ifdef MP-WEIXIN */
				height: calc(100vh - 380rpx);
				/* #endif */
				/* #ifdef H5 */
				height: calc(100vh - 470rpx);
				/* #endif */
				.scrollItem {
					position: relative;
					// 纵向排列
					display: flex;
					margin-bottom: 20rpx;
					
					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 8rpx;
					}
					.musicInfo {
						display: flex;
						// 改变flex布局 纵向排列
						flex-direction: column;
						margin-left: 20rpx;
						
						text {
							height: 40rpx;
							line-height: 40rpx;
							font-size: 24rpx;
							//	有些歌名会太长 所以修饰一下
							max-width: 200rpx; // 允许最宽400rpx
							white-space: nowrap; // 不允许换行
							overflow: hidden; // 超出的部分隐藏
							text-overflow: ellipsis; //超出的部分用省略号代替
							
						}
					}
					.iconfont {
						position: absolute;
						right: 0;
						width: 80rpx;
						height: 80rpx;
						line-height: 80rpx;
						// background: red;
						text-align: right;
					}
				}
			}
		}
	}
</style>
